<script setup lang="ts">
import {reactive, ref, onMounted, getCurrentInstance, nextTick} from "vue";
import { parameterAdd, parameterEdit } from "@/services/parameterApi.ts";
import JinDrawer from "@/components/framework/jin-drawer/jin-drawer.vue";
import { Message } from "@arco-design/web-vue";
import AiEditorContent from "@/components/framework/AiEditorContent/AiEditorContent.vue";

const emits = defineEmits<{
  (e: "getList"): void;
}>();

const drawer = ref<{
  init: () => {};
  close: () => {};
}>();

const option = reactive({
  title: "",
  visible: false,
});
const form = reactive({
  paramKey: "",
  paramName: "",
  id: "",
  paramValue: "",
  memo: "",
});
// 确定
const formRef = ref(null);

const promise = (url, msg) => {
  url
    .then((res) => {
      if (res.code === 200) {
        Message.success(msg);
        drawer.value?.close();
        emits("getList");
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
const editorRef = ref();
const handleOk = () => {
  loading.value = true;
  if (option.title === "新增参数") {
    promise(parameterAdd(form), "添加成功");
  } else {
    promise(parameterEdit(form), "编辑成功");
  }
};

const handleCancel = () => {
  drawer.value?.close();
};
// 添加
const show = () => {
  editorRef.value?.clear()
  form.paramKey = "";
  form.paramName = "";
  form.memo = "";
  form.id = null;
  form.paramValue = "";
  // editorRef.value.clear();

  option.title = "新增参数";
  drawer.value?.init();
  formRef.value?.clearValidate();
  nextTick(() => {
    editorRef.value.init('');
  })
};

// 修改
const edit = (row) => {
  editorRef.value?.clear()
  form.paramKey = row.paramKey;
  form.paramName = row.paramName;
  form.paramValue = row.paramValue;

  form.memo = row.memo;
  form.id = row.id;
  option.title = "编辑参数";
  drawer.value?.init();
  formRef.value?.clearValidate();

  nextTick(() => {
    editorRef.value.init(row.paramValue);
  })
};

defineExpose({
  show,
  edit,
});

const handleSubmit = async (fn: (bool: boolean) => void) => {
  const error = await formRef.value?.validate();

  if (!error) {
    fn(true);
    return true;
  }
  fn(false);
  return false;
};
const loading = ref(false);
onMounted(() => {});
</script>

<template>
  <jin-drawer
    :title="option.title"
    @ok="handleOk"
    :width="600"
    @cancel="handleCancel"
    @beforeOk="handleSubmit"
    ref="drawer"
    :ok-loading="loading"
  >
    <a-form
      ref="formRef"
      :model="form"
      @submit="handleSubmit"
    >
      <a-form-item
        field="paramKey"
        label="参数key"
        :rules="[{required:true,message:'请输入参数key'}]"
        :validate-trigger="['change','input']"
      >
        <a-input
          allow-clear
          placeholder='请输入参数key'
          v-model.trim="form.paramKey"
        ></a-input>
      </a-form-item>
      <a-form-item
        field="paramName"
        label="参数名称"
        :rules="[{required:true,message:'请输入参数名称'}]"
        :validate-trigger="['change','input']"
      >
        <a-input
          allow-clear
          placeholder='请输入参数名称'
          v-model='form.paramName'
        ></a-input>
      </a-form-item>
      <a-form-item
        field="paramValue"
        label="参数值"
        :rules="[{required:true,message:'请输入参数值'}]"
        :validate-trigger="['change','input']"
      >
        <!-- <a-input
          allow-clear
          placeholder='请输入参数值'
          v-model='form.paramValue'
        ></a-input> -->
        <AiEditorContent readonly ref="editorRef" style="height: 600px" v-model:content="form.paramValue" placeholder="请输入参数值内容"></AiEditorContent>
<!--        <editor-content-->
<!--          ref="editorRef"-->
<!--          v-model="form.paramValue"-->
<!--        />-->
      </a-form-item>

      <a-form-item
        field="memo"
        label="描述"
      >
        <a-textarea
          placeholder="请输入描述信息"
          allow-clear
          v-model="form.memo"
        />
      </a-form-item>
    </a-form>
  </jin-drawer>
</template>

<style scoped lang="scss">
</style>
